<template>
  <div class="xxbzwh_component baseContainer">
    <div class="baseBoderShadow bgWhite baseBorderRadius">
      <div class="operate_container">
        <!-- 是否启用 -->
        <div class="operate_item">
          <div class="operate_left">是否启用</div>
          <div class="operate_right">
            <el-select
              v-model="sfky"
              placeholder="请选择"
              style="width: 185px;"
            >
              <el-option
                v-for="(item, index) in sfkyOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 是否系统级 -->
        <div class="operate_item">
          <div class="operate_left">是否系统级</div>
          <div class="operate_right">
            <el-select
              v-model="sfxtj"
              placeholder="请选择"
              style="width: 185px;"
            >
              <el-option
                v-for="(item, index) in sfxtjOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 名称 -->
        <div class="operate_item">
          <div class="operate_left">名称</div>
          <div class="operate_right">
            <el-input
              placeholder="请输入"
              v-model.trim="mc"
              style="width: 182px;"
              clearable
            ></el-input>
          </div>
        </div>
        <!-- 标准代码 -->
        <div class="operate_item">
          <div class="operate_left">标准代码</div>
          <div class="operate_right">
            <el-input
              placeholder="请输入"
              v-model.trim="bzdm"
              style="width: 182px;"
              clearable
            ></el-input>
          </div>
        </div>
        <!-- 查询按钮 -->
        <div class="operate_item_btnGroup">
          <el-button
            type="warning"
            @click="searchFunc"
          >搜索</el-button>
          <el-button
            type="primary"
            class="btnGray"
            @click="resetFunc"
          >重置</el-button>
        </div>
      </div>
      <!--  -->
      <div class="handle_wrap">
        <el-button
          type="primary"
          @click="addFunc"
        >新增</el-button>
        <el-button @click="delFunc(1)">删除</el-button>
      </div>
      <!-- 表格区域 -->
      <div class="table_wrap">
        <div class="table_box">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            >
            </el-table-column>
            <el-table-column
              label="序号"
              width="60"
              align="center"
            >
              <template slot-scope="scope">{{ pageSize * (currentPage - 1) + 1 + scope.$index }}</template>
            </el-table-column>
            <el-table-column label="代码">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.dm"
                >{{scope.row.dm}}</div>
              </template>
            </el-table-column>
            <el-table-column label="名称">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.mc"
                >{{scope.row.mc}}</div>
              </template>
            </el-table-column>
            <el-table-column label="简称">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.mcjc"
                >{{scope.row.mcjc || '-'}}</div>
              </template>
            </el-table-column>
            <el-table-column label="标准代码">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.bzdm"
                >{{scope.row.bzdm || '-'}}</div>
              </template>
            </el-table-column>
            <el-table-column label="标准代码名称">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.bzdmmc"
                >{{scope.row.bzdmmc || '-'}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="排序号"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.xh"
                >{{scope.row.xh || '-'}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="是否启用"
              align="center"
            >
              <template slot-scope="scope">
                <div class="special_switch_wrap">
                  <el-switch
                    v-model="scope.row.sfky"
                    inactive-text="否"
                    active-text="是"
                    active-value="1"
                    inactive-value="0"
                    @change="changeFunc(scope.row, 'sfky', ...arguments)"
                  >
                  </el-switch>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="是否系统级"
              align="center"
            >
              <template slot-scope="scope">
                <div class="special_switch_wrap">
                  <el-switch
                    v-model="scope.row.sfxtj"
                    inactive-text="否"
                    active-text="是"
                    active-value="1"
                    inactive-value="0"
                    @change="changeFunc(scope.row, 'sfxtj', ...arguments)"
                  >
                  </el-switch>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div class="el-table-btn-wrap">
                  <el-button
                    type="warning"
                    size="mini"
                    round
                    @click="editFunc(scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    round
                    @click="delFunc(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page_box">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增和编辑 -->
    <el-dialog
      title="编辑/新增数据字典"
      width="460px"
      :visible.sync="dialogVisible"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <template v-for="(item, index) in formDataList">
          <el-form-item
            :key="index"
            :label="item.label"
            :prop="item.name"
          >
          <template v-if="item.type === 'number'">
              <el-input
                type="number"
                placeholder="请输入内容"
                v-model="formData[item.name]"
                v-num
              ></el-input>
            </template>
            <template v-if="item.type === 'text'">
              <el-input
                placeholder="请输入内容"
                v-model.trim="formData[item.name]"
              ></el-input>
            </template>
            <template v-else-if="item.type === 'radio'">
              <el-radio-group v-model="formData[item.name]">
                <template v-for="(vo, i) in item.options">
                  <el-radio
                    :key="`radio_${i}`"
                    :label="vo.label"
                  >{{vo.name}}</el-radio>
                </template>
              </el-radio-group>
            </template>
          </el-form-item>
        </template>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'xxbzwh',
  data() {
    return {
      editId: "", // 编辑的id
      sfky: "", // 是否启用
      sfkyOptions: [
        { label: "全部", value: "" },
        { label: "是", value: "1" },
        { label: "否", value: "0" }
      ],
      sfxtj: "", // 是否系统级
      sfxtjOptions: [
        { label: "全部", value: "" },
        { label: "是", value: "1" },
        { label: "否", value: "0" }
      ],
      mc: "", // 名称
      bzdm: "", // 标准代码
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      tableData: [], // 表格数据
      multipleSelection: [], // 选中的
      searchData: {
        sfky: "",
        sfxtj: "",
        mc: "",
        bzdm: ""
      }, // 查询数据
      dialogVisible: false,
      formData: {
        dm: "",
        mc: "",
        mcjc: "",
        bzdm: "",
        bzdmmc: "",
        xh: "",
        sfky: "1",
        sfxtj: "1"
      },
      rules: {
        dm: [
          { required: true, message: "代码不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        mc: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
        ],
        mcjc: [
          { min: 0, max: 100, message: "长度在 0 到 100 个字符", trigger: "blur"  }
        ],
        bzdm: [
          { required: true, message: "标准代码不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        bzdmmc: [
          { required: true, message: "标准代码名称不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        xh: [
          { required: true, message: "排序号不能为空", trigger: "blur" },
          { validator: (rule, value, callback) => {
            if (value > 999) {
              return callback(new Error('排序号必须为小于1000的正整数'))
            }
            callback();
          }, required: true, message: '排序号必须为小于1000的正整数'  }
        ]
      },
      formDataList: [
        { type: "text", name: "dm", label: "代码" },
        { type: "text", name: "mc", label: "名称" },
        { type: "text", name: "mcjc", label: "简称" },
        { type: "text", name: "bzdm", label: "标准代码" },
        { type: "text", name: "bzdmmc", label: "标准代码名称" },
        { type: "number", name: "xh", label: "排序号" },
        {
          type: "radio",
          name: "sfky",
          label: "是否启用",
          options: [{ name: "启用", label: "1" }, { name: "停用", label: "0" }]
        },
        {
          type: "radio",
          name: "sfxtj",
          label: "数据类型",
          options: [
            { name: "系统级", label: "1" },
            { name: "非系统级", label: "0" }
          ]
        }
      ]
    };
  },
  mounted() {
    this.findList();
  },
  methods: {
    /**
     * @name searchFunc
     * @description 搜索
     * @author cjs1992
     * @date 2019-11-13 11:24:27
     */
    async searchFunc() {
      this.searchData = {
        sfky: this.sfky,
        sfxtj: this.sfxtj,
        bzdm: this.bzdm,
        mc: this.mc
      };
      this.handleCurrentChange(1);
    },
    /**
     * @name resetFunc
     * @description 重置
     * @author cjs1992
     * @date 2019-11-13 11:25:38
     */
    async resetFunc() {
      this.sfky = "";
      this.sfxtj = "";
      this.bzdm = "";
      this.mc = "";
      this.searchFunc();
    },
    /**
     * @name addFunc
     * @description 点击添加按钮
     * @author cjs1992
     * @date 2019-11-13 10:11:23
     */
    async addFunc() {
      this.editId = ""; // 新增状态
      this.resetFormData();
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.resetForm()
      });
    },
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.sureFunc();
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      // 此处需要先清除数据 TODO
      this.resetFormData();
      this.$refs["ruleForm"].resetFields();
    },
    /**
     * @name findList
     * @description 查询列表
     * @author cjs1992
     * @date 2019-11-13 10:37:49
     */
    async findList() {
      const res = await this.$store.dispatch("jcsz-xxbzwh/findList", {
        ...this.searchData,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      });
      let list = res.data.list || [];
      // list.map((item) => {
      //   item.sfky = Number(item.sfky);
      //   item.sfxtj = Number(item.sfxtj);
      // })
      this.tableData = list;
      this.totalSize = res.data.total;
    },
    /**
     * @name handleSizeChange
     * @description 切换每页几条
     * @author cjs1992
     * @date 2019-11-13 10:43:12
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name handleCurrentChange
     * @description 切换页码
     * @author cjs1992
     * @date 2019-11-13 10:43:55
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.findList();
    },
    /**
     * @name sureFunc
     * @description 新增/编辑
     * @author cjs1992
     * @date 2019-11-13 10:32:08
     */
    async sureFunc() {
      let url = "add",
        msg = "新增",
        obj = {};
      if (this.editId) {
        url = "edit";
        msg = "编辑";
        obj = {
          id: this.editId
        };
      }
      await this.$store.dispatch(`jcsz-xxbzwh/${url}`, {
        ...this.formData,
        ...obj
      });
      this.$message({
        type: "success",
        message: `${msg}成功!`
      });
      this.dialogVisible = false;
      // this.currentPage = 1;
      this.findList();
    },
    /**
     * @name changeFunc
     * @description 更换是否启用和是否系统级
     * @author cjs1992
     * @date 2019-11-13 11:49:26
     */
    async changeFunc(obj, str, val) {
      await this.$store.dispatch('jcsz-xxbzwh/editSfkyOrSfxtj', {
        id: obj.id,
        [str]: val
      });
      this.$message({
        type: 'success',
        message: '编辑成功!'
      });
      this.findList();
      // this.resetFormData();
      // this.editId = obj.id;
      // for (let key in obj) {
      //   if (this.formData[key] !== undefined) {
      //     this.$set(this.formData, key, obj[key]);
      //   }
      //   if (key === str) {
      //     this.$set(this.formData, key, val);
      //   }
      // }
      // this.sureFunc();
      // console.log(obj, str, val);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /**
     * @name resetFormData
     * @description 重置表格数据
     * @author cjs1992
     * @date 2019-11-13 11:12:49
     */
    async resetFormData() {
      this.formData = {
        dm: "",
        mc: "",
        mcjc: "",
        bzdm: "",
        bzdmmc: "",
        xh: "",
        sfky: "1",
        sfxtj: "1"
      };
    },
    /**
     * @name editFunc
     * @description 编辑
     * @author cjs1992
     * @date 2019-11-13 11:16:28
     */
    async editFunc(data) {
      this.resetFormData();
      this.editId = data.id;
      for (let key in data) {
        if (this.formData[key] !== undefined) {
          this.$set(this.formData, key, data[key]);
        }
      }
      this.dialogVisible = true;
    },
    /**
     * @name delFunc
     * @description 删除方法
     * @author cjs1992
     * @date 2019-11-13 11:27:23
     */
    async delFunc(data) {
      let obj = [];
      if (data !== 1) {
        // 单个删除
        obj = [data.id];
      } else {
        // 多条删除
        if (!this.multipleSelection.length) {
          this.$message({
            type: "warning",
            message: "请选择要删除的数据"
          });
          return;
        }
        obj = this.multipleSelection.map(item => item.id);
      }
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.$store.dispatch("jcsz-xxbzwh/del", obj);
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.handleCurrentChange(1);
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../common-switch.scss";
.operate_container {
  padding: 22px;
  box-shadow: 0 5px 39px 0 rgba(0, 0, 0, 0.1);
}
.operate_item {
  display: inline-table;
  margin-right: 20px;
  margin-bottom: 12px;
}
.operate_left {
  display: table-cell;
  padding-right: 12px;
  width: 88px;
  color: #344563;
  text-align: right;
  font-size: 14px;
  box-sizing: border-box;
}
.operate_right {
  display: table-cell;
}
.operate_item_btnGroup {
  display: inline-block;
  width: 272px;
  text-align: right;
}
.operate_item_btnGroup .el-button {
  width: 106px;
}
.table_wrap {
  padding: 10px 20px;
}
</style>
